<template>
    <section class="section section-shaped section-lg my-0">
        <div class="shape shape-style-1 bg-gradient-default">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div v-if="showError" class="contentDiv">
            <base-alert type="danger">
                {{errorMsg}}
            </base-alert>
        </div>
        <div v-if="showInfo" class="contentDiv">
            <base-alert class="col-md-6" type="dark">
                {{infoMsg}}
            </base-alert>
        </div>
        <search-house v-for="(result,index) in results" :key="index" :msg="result"></search-house>
    </section>
</template>
<script>
import searchHouse from "./components/searchHouse";
import {searchH} from "../api";

export default {
    data() {
        return{
            results: [],
            showError: false,
            showInfo: false,
            errorMsg: '',
            infoMsg: ''
        }
    },
    methods: {
        getHouseList(){
            this.showError = this.showInfo = false;
            let param = this.$route.params? this.$route.params : '';
            searchH({params:param})
            .then(res => {
                // console.log(res.data);
                this.results = res.data;
                if (this.results === null || this.results.length === 0){
                    this.showInfo = true;
                    this.infoMsg = '抱歉，未找到对应房源Orz';
                }
            })
            .catch(err => {
                this.showError = true;
                this.errorMsg = err;
                return false;
            })
        }
    },
    watch: {
        "$route": "getHouseList"
    },
    created(){
        this.getHouseList();
    },
    components: {
        searchHouse
    }
};
</script>
<style>
.contentDiv{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    margin: auto;
}
</style>
